import ChartBase from "./chart-base";
import {
  grid,
  legend,
  tooltip,
  xAxis,
  yAxis,
  gridConfig,
  legendConfig,
  xAxisConfig,
  yAxisConfig,
  tooltipConfig,
  barSeries,
  barSeriesLabel,
  barSeriesConfig,
  barSeriesLabelConfig,
} from "./common";
import { deepClone, mergeObject } from "@/utils";
export default class ColumnCustom extends ChartBase {
  constructor() {
    super();
  }

  // 基础描述
  _info = {
    name: "条形图",
    type: "column-custom", // 图表类型

    group: "column", // 图表分类
    component: "e-chart",
    icon: "column-custom", // 图表展示ICON
  };

  // 总 配置项
  _defaultOption = {
    dataset: {
      source: [],
      dimensions: [],
    },
    grid,
    legend,
    tooltip,
    xAxis: {
      ...yAxis,
    },
    yAxis: {
      ...xAxis,
    },
    series: [],
  };
  // 系列
  _defaultSeries = {
    type: "bar",
    data: [],
    //  _defaultOption.dataset.source.map((item, i) => {
    //   var itemStyle = {
    //     barBorderRadius: [10, 10, 10, 10],
    //   }
    //   return {
    //     value: item.value,
    //     itemStyle: itemStyle
    //   };
    // }),
    // label: {
    //   normal: {
    //     color: '#666',
    //     show: true,
    //     position: [0, '-100%'],
    //     textStyle: {
    //       fontSize: 14,
    //     },
    //     formatter: function (a, b) {
    //       return a.value
    //     }
    //   }
    // }
    // ...barSeries,
    // label: barSeriesLabel
  };

  // 数据结构描述
  _dataPoolConfig = [
    {
      label: "类目轴",
      key: "xField",
      type: ["string", "date", "number"],
      limit: 1,
    },
    {
      label: "数值轴",
      key: "yField",
      type: ["number"],
      limit: -1,
    },
  ];

  // 样式配置描述信息
  _styleOptionConfig = [
    {
      label: "网格配置",
      bindKeys: "_group.grid",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "左边距",
      bindKeys: "option.grid.left",
      controlType: "input",
      controlValue: "80",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "上边距",
      bindKeys: "option.grid.top",
      controlType: "input",
      controlValue: "60",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "右边距",
      bindKeys: "option.grid.right",
      controlType: "input",
      controlValue: "10%",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "下边距",
      bindKeys: "option.grid.bottom",
      controlType: "input",
      controlValue: "60",
      controlProps: {},
      controlConfigs: {},
    },
    ...legendConfig,
    ...tooltipConfig,
    {
      label: "数值轴配置",
      bindKeys: "_group.xAxis",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "名称",
      bindKeys: "option.xAxis.name",
      controlType: "input",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "轴线显示",
      bindKeys: "option.xAxis.axisLine.show",
      controlType: "switch",
      controlValue: false,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "轴线颜色",
      bindKeys: "option.xAxis.axisLine.lineStyle.color",
      controlType: "color-picker",
      controlValue: "#ccc",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "刻度显示",
      bindKeys: "option.xAxis.axisTick.show",
      controlType: "switch",
      controlValue: false,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "刻度颜色",
      bindKeys: "option.xAxis.axisTick.lineStyle.color",
      controlType: "color-picker",
      controlValue: "#ccc",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "标签显示",
      bindKeys: "option.xAxis.axisLabel.show",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "标签角度",
      bindKeys: "option.xAxis.axisLabel.rotate",
      controlType: "slider",
      controlValue: 0,
      controlProps: {
        min: -90,
        max: 90,
        step: 5,
      },
      controlConfigs: {},
    },
    {
      label: "隐藏重叠标签",
      bindKeys: "option.xAxis.axisLabel.hideOverlap",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "标签颜色",
      bindKeys: "option.xAxis.axisLabel.color",
      controlType: "color-picker",
      controlValue: "#909399",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "标签大小",
      bindKeys: "option.xAxis.axisLabel.fontSize",
      controlType: "input-number",
      controlValue: 12,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "分割线显示",
      bindKeys: "option.xAxis.splitLine.show",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "分割线颜色",
      bindKeys: "option.xAxis.splitLine.lineStyle.color",
      controlType: "color-picker",
      controlValue: "#eee",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "分割线类型",
      bindKeys: "option.xAxis.splitLine.lineStyle.type",
      controlType: "select",
      controlValue: "dashed",
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: "实线",
            value: "solid",
          },
          {
            label: "虚线",
            value: "dashed",
          },
        ],
      },
    },

    {
      label: "类目轴配置",
      bindKeys: "_group.yAxis",
      controlType: "group",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "名称",
      bindKeys: "option.yAxis.name",
      controlType: "input",
      controlValue: "",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "轴线显示",
      bindKeys: "option.yAxis.axisLine.show",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "轴线颜色",
      bindKeys: "option.yAxis.axisLine.lineStyle.color",
      controlType: "color-picker",
      controlValue: "#ccc",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "刻度显示",
      bindKeys: "option.yAxis.axisTick.show",
      controlType: "switch",
      controlValue: false,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "刻度颜色",
      bindKeys: "option.yAxis.axisTick.lineStyle.color",
      controlType: "color-picker",
      controlValue: "#ccc",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "标签显示",
      bindKeys: "option.yAxis.axisLabel.show",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "标签角度",
      bindKeys: "option.yAxis.axisLabel.rotate",
      controlType: "slider",
      controlValue: 0,
      controlProps: {
        min: -90,
        max: 90,
        step: 5,
      },
      controlConfigs: {},
    },
    {
      label: "标签长度",
      bindKeys: "config.yAxisConfig.font.length",
      controlType: "input-number",
      controlValue: 4,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "隐藏重叠标签",
      bindKeys: "option.yAxis.axisLabel.hideOverlap",
      controlType: "switch",
      controlValue: true,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "标签颜色",
      bindKeys: "option.yAxis.axisLabel.color",
      controlType: "color-picker",
      controlValue: "#909399",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "标签大小",
      bindKeys: "option.yAxis.axisLabel.fontSize",
      controlType: "input-number",
      controlValue: 12,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "分割线显示",
      bindKeys: "option.yAxis.splitLine.show",
      controlType: "switch",
      controlValue: false,
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "分割线颜色",
      bindKeys: "option.yAxis.splitLine.lineStyle.color",
      controlType: "color-picker",
      controlValue: "#eee",
      controlProps: {},
      controlConfigs: {},
    },
    {
      label: "分割线类型",
      bindKeys: "option.yAxis.splitLine.lineStyle.type",
      controlType: "select",
      controlValue: "dashed",
      controlProps: {},
      controlConfigs: {
        options: [
          {
            label: "实线",
            value: "solid",
          },
          {
            label: "虚线",
            value: "dashed",
          },
        ],
      },
    },
    ...barSeriesConfig,
    ...barSeriesLabelConfig,
  ];
  getOption({
    dataField = [],
    dataList = [],
    dataTotal = 0,
    dataPoolField,
    styleOptionConfig = [],
    themeColor = [],
    themeStyle = {},
  }) {
    this._updateDataPoolField(dataField, dataPoolField);
    const { xField, yField } = this._handledataPoolFieldData(
      dataPoolField,
      dataList
    );
    let { option, series, config } =
      this._transformStyleOptionConfig(styleOptionConfig);
    let defaultOption = deepClone(this._defaultOption);
    // 再合并自定义配置项
    if (defaultOption && option)
      defaultOption = mergeObject(defaultOption, option);

    xField.forEach((field) => {
      defaultOption.yAxis.data = field.dataList;
    });
    yField.forEach((field) => {
      defaultOption.series.push({
        name: field.fieldDescribe,
        type: "bar",
        data: field.dataList,
        barMaxWidth: series.barMaxWidth,
        barMinWidth: series.barMinWidth,
      });
    });
    if (config) {
      if (config.yAxisConfig.font.length) {
        defaultOption.yAxis.axisLabel.formatter = (item) => {
          let temp = item.slice(0, config.yAxisConfig.font.length);
          return (
            item.slice(0, config.yAxisConfig.font.length) +
            (item.length > temp.length ? "..." : "")
          );
        };
      }
    }
    defaultOption.color = themeColor;
    return defaultOption;
  }
  getClickData(event) {
    const { name, seriesName, value } = event;

    return {
      label: name,
      value: value[seriesName],
    };
  }
}
